<!DOCTYPE HTML>
<!--[if IE 8]>
<html class="ie8 no-js" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" xmlns:th="http://www.thymeleaf.org"> <!--<![endif]-->
<head th:replace="common/head::sf-head"></head>
<body>
<!-- begin container -->
<div id="wrap">
    <!-- begin header -->
    <header th:replace="common/header::sf-protal-header"></header>
    <!-- end header -->
    <!-- begin content -->
    <section id="content" class="container clearfix">
        <!-- begin page header -->
        <header id="page-header">
            <h1 id="page-title">项目动态</h1>
        </header>
        <!-- end page header -->
        <!-- begin types of images -->
        <section>
            <h2>相关项目</h2>
            <div class="one-fourth">
                <h3>CRM系统</h3>
                <div class="entry-image">
                    <img th:src="@{/images/entries/220x130/dining-and-living-cream-220x130.png}"
                         src="../static/images/entries/220x130/dining-and-living-cream-220x130.png" alt=""
                         title="Image Title">
                </div>
            </div>

            <div class="one-fourth">
                <h3>Image with Caption</h3>
                <div class="caption">
                    <div class="entry-image">
                        <img th:src="@{/images/entries/220x130/living-large-windows-220x130.png}"
                             src="../static/images/entries/220x130/living-large-windows-220x130.png" alt=""
                             title="Image Title"></div>
                </div>
            </div>

            <div class="one-fourth">
                <h3>Image with Lightbox</h3>
                <div class="entry-image">
                    <a class="fancybox" href="../static/images/entries/full-size/living-white.jpg"
                       title="Image Title"><span class="overlay zoom"></span>
                        <img th:src="@{/images/entries/220x130/living-white-220x130.png}"
                             src="../static/images/entries/220x130/living-white-220x130.png" alt=""></a>
                </div>
            </div>

            <div class="one-fourth column-last">
                <h3>Image with Lightbox Gallery</h3>
                <div class="entry-image">
                    <a class="fancybox" rel="gallery-study" href="../static/images/entries/full-size/study.jpg"
                       title="Project Title"><span class="overlay zoom"></span><img
                            th:src="@{/images/entries/220x130/study-220x130.png}"
                            src="../static/images/entries/220x130/study-220x130.png" alt=""></a>
                    <a class="fancybox invisible" rel="gallery-study"
                       href="../static/images/entries/full-size/dining-white2.jpg" title="Project Title"><span
                            class="overlay zoom"></span><img
                            th:src="@{/images/entries/220x130/dining-white2-220x130.png}"
                            src="../static/images/entries/220x130/dining-white2-220x130.png" alt=""></a>
                    <a class="fancybox invisible" rel="gallery-study"
                       href="../static/images/entries/full-size/dining-brown.jpg" title="Project Title"><span
                            class="overlay zoom"></span><img
                            th:src="@{/images/entries/220x130/dining-brown-220x130.png}"
                            src="../static/images/entries/220x130/dining-brown-220x130.png" alt=""></a>
                </div>
            </div>
            <div class="clear"></div>
        </section>
        <!-- end types of images -->

        <hr>

        <!-- begin aligned images -->
        <section>
            <h2>Aligned Images</h2>
            <!-- begin left-aligned image -->
            <h3>Left-Aligned Image</h3>
            <div class="entry-image float-left"><img
                    th:src="@{/images/entries/220x130/living-large-windows-220x130.png}"
                    src="../static/images/entries/220x130/living-large-windows-220x130.png" alt="" title="Image Title">
            </div>
            <p>Vestibulum quis diam purus. Nulla id enim vel quam lacinia elementum. Phasellus a hendrerit enim.
                Suspendisse lacinia nulla lacinia tellus convallis non luctus tortor iaculis. Nam cursus augue sed
                lectus consequat non laoreet nulla sodales. Nunc sagittis sapien at urna mollis in porta sem mattis.
                Duis venenatis odio erat. Nullam nec commodo risus. Integer arcu eros, luctus in suscipit at, blandit in
                lectus. Quisque justo lorem, vulputate quis fermentum ac, cursus non leo.</p>
            <p>Fusce est eros, facilisis at sodales elementum, mollis eget erat. Vivamus vitae augue dolor, non accumsan
                ligula. Cras sed risus sed dolor scelerisque tempor. Duis vel lacus massa, sed vulputate sapien. Aenean
                at ligula risus. Quisque eget quam tellus. Sed tellus est, viverra eu feugiat ac, placerat nec tortor.
                Proin sodales nisi nec dolor aliquet id ornare odio eleifend. Pellentesque sem magna, rhoncus in sodales
                eget, tincidunt nec ante. Etiam ultricies pretium libero interdum accumsan. Proin facilisis tristique
                diam, eget consequat nunc euismod at. Quisque suscipit, justo id faucibus sollicitudin, purus lectus
                placerat massa, id euismod enim nibh faucibus nisi. In commodo lectus nec lorem eleifend pulvinar. Proin
                egestas condimentum est, ut dapibus urna mollis id.</p>
            <!-- end left-aligned image -->

            <!-- begin right-aligned image -->
            <h3>Right-Aligned Image</h3>
            <div class="entry-image float-right">
                <img src="../static/images/entries/220x130/study-220x130.png" alt=""
                     th:src="@{/images/entries/220x130/study-220x130.png}" title="Image Title">
            </div>
            <p>Vestibulum quis diam purus. Nulla id enim vel quam lacinia elementum. Phasellus a hendrerit enim.
                Suspendisse lacinia nulla lacinia tellus convallis non luctus tortor iaculis. Nam cursus augue sed
                lectus consequat non laoreet nulla sodales. Nunc sagittis sapien at urna mollis in porta sem mattis.
                Duis venenatis odio erat. Nullam nec commodo risus. Integer arcu eros, luctus in suscipit at, blandit in
                lectus. Quisque justo lorem, vulputate quis fermentum ac, cursus non leo.</p>
            <p>Fusce est eros, facilisis at sodales elementum, mollis eget erat. Vivamus vitae augue dolor, non accumsan
                ligula. Cras sed risus sed dolor scelerisque tempor. Duis vel lacus massa, sed vulputate sapien. Aenean
                at ligula risus. Quisque eget quam tellus. Sed tellus est, viverra eu feugiat ac, placerat nec tortor.
                Proin sodales nisi nec dolor aliquet id ornare odio eleifend. Pellentesque sem magna, rhoncus in sodales
                eget, tincidunt nec ante. Etiam ultricies pretium libero interdum accumsan. Proin facilisis tristique
                diam, eget consequat nunc euismod at. Quisque suscipit, justo id faucibus sollicitudin, purus lectus
                placerat massa, id euismod enim nibh faucibus nisi. In commodo lectus nec lorem eleifend pulvinar. Proin
                egestas condimentum est, ut dapibus urna mollis id.</p>
            <!-- end right-aligned image -->
        </section>
        <!-- end aligned images -->

        <!-- end main content -->
    </section>
    <!-- end content -->

    <!-- begin footer -->
    <footer th:replace="common/footer::footer"></footer>
    <!-- end footer -->
</div>
<!-- end container -->

</body>
</html>